<template>
  <div class="accountContainer">
    <div class="title-container">
      <div v-show="!isHiddenTitle" class="left-title"><Title title="收款账户"/></div>
    </div>
    <dynamicEditTable
      v-if="flag"
      ref="dynamicEditTableRef"
      v-model="accountData.list"
      :list-data="accountData.list"
      :list-setting="listSetting"
      :is-edit="true"
      :show-add-icon="true"
      :show-copy-btn="false"
      :show-add-btn="showAddBtn"
      :add-btn-style="addBtnStyle"
      :add-btn-top="addBtnTop"
      open-page
      can-empty
      btn-text="添加账户"
      @fetchAutocomplete="fetchAutocomplete"
      @autocompleteSelect="autocompleteSelect"/>
  </div>
</template>

<script>
/**
 *签约审批和销售供应商共用
 */
// components
import Title from '@/components/Title';
import dynamicEditTable from '@/components/Common/dynamicEditTable';
// api
import accountTable from '@/mixins/accountTable';
import accountBackfill from '@/mixins/accountBackfill';

export default {
  components: { Title, dynamicEditTable },
  mixins: [accountTable, accountBackfill],
  model: {
    prop: 'accountData',
    event: 'changeValue'
  },
  props: {
    accountData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    isCompany: {
      type: Boolean,
      default: false
    },
    supplierId: {
      type: Number | String,
      default: ''
    },
    supplierType: {
      type: Number,
      default: 0
    },
    addBtnStyle: {
      type: Object,
      default: () => ({})
    },
    addBtnTop: {
      type: Boolean,
      default: true
    },
    isHiddenTitle: {
      type: Boolean,
      default: false
    },
    isFromSignUp: { // 是否签约内审
      type: Boolean,
      default: false
    },
    openRealTimeVerify: { // 表单开启实时填写校验
      type: Boolean,
      default: false
    },
    showAddBtn: { // 添加按钮
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      options: [
        {
          id: 1,
          name: '未绑定'
        }, {
          id: 0,
          name: '已绑定'
        }
      ],
      historyAccountType: 1 // 收款账户类型 0个人 1供应商，用于区分数据来源
    };
  },
  computed: {
    listSetting() {
      const arr = [
        { label: '收款户名', type: 'autocomplete', maxlength: 50, width: '160px', isRequired: true, keyword: 'payName', queryName: 'queryString' },
        { label: '收款账号', type: 'inputText', width: '160px', isRequired: true, keyword: 'payNum' },
        { label: '身份证号', type: 'inputText', width: '180px', isRequired: this.isFromSignUp, keyword: 'identityNumber' },
        { label: '联系电话', type: 'inputText', width: '130px', isRequired: this.isFromSignUp, keyword: 'tel' },
        {
          label: '银行',
          type: 'select',
          keyName: 'value',
          isRequired: false,
          keyword: 'bank',
          width: '130px',
          options: this.bankList,
          placeholder: '请选择' },
        { label: '省市', type: 'selectCity', isRequired: false, selectType: 'city', width: '160px', placeholder: '省市', keyword: 'province' },
        { label: '支行', type: 'inputText', width: '160px', isRequired: false, keyword: 'subBank' },
        { label: '创建人', type: 'inputText', placeholder: ' ', disabled: true, width: '160px', keyword: 'createUserName' },
        { label: '所属部门', type: 'inputText', placeholder: ' ', disabled: true, width: '160px', keyword: 'departmentName', isRequired: false }
      ];
      if (!this.isFromSignUp) {
        arr.push({ label: '支付平台', type: 'select', keyName: 'value', isRequired: false, keyword: 'payPlatform', width: '130px', options: this.paymentList, placeholder: '请选择' });
      }
      if (!this.isCompany) {
        arr.unshift(
          { label: '云账户', type: 'select', width: '130px', isRequired: this.isFromSignUp, keyword: 'isBindCloud', options: this.options },
        );
      }
      return arr;
    }
  },
  watch: {
    isCompany: function() {
      this.flag = false;
      this.$nextTick(() => {
        this.flag = true;
      });
    },
    'accountData.list': {
      handler(list) {
        this.openRealTimeVerify && this.realTimeValidate(list);
      },
      deep: true
    }
  },
  created() {
    this.getBankList();
    this.getPaymentList();
  },
  methods: {
    // 实时填写校验
    realTimeValidate(list) {
      if (!list || !list.length) {
        this.$emit('showBadge', false);
        return;
      }
      const requiredKeys = this.listSetting.filter(i => i.isRequired).map(i => i.keyword);
      let isPass = true;
      list.forEach(field => {
        requiredKeys.forEach(key => {
          if (!field.hasOwnProperty(key) || (!field[key] && field[key] !== 0)) {
            isPass = false;
          }
        });
      });
      this.$emit('showBadge', !isPass);
    },
    validate() {
      return new Promise((resolve, reject) => {
        if (this.isFromSignUp && this.accountData && this.accountData.list && this.accountData.list.length === 0) {
          reject('accountListRef');
        }
        this.$refs.dynamicEditTableRef.validate().then(() => {
          resolve();
        }).catch(() => {
          reject();
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.accountContainer {
  position: relative;
  &::v-deep {
  .dynamic-container {
      margin-top: 12px !important;
    }
  }
}
.title-container {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  .left-title {
    margin-right: 10px;
  }
  .label {
    font-size: 14px;
    color: #999999;
    line-height: 18px;
  }
  .switch {
    display: flex;
    align-items: center;
  }
}
</style>
